--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / DropDownMenu.vue
Displaying Raw • Download
meshchatx/src/frontend/components/DropDownMenu.vue 514005e995d29a03df041d5a9772fa61b1664294 (514005e9) Text, 4.07 KB
T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->
Tb4b4b4<Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-click-outsideTff7b72=Ta5d6ff"Tb4b4b4{ Te6edf3handlerTff7b72: Te6edf3onClickOutsideMenuTb4b4b4, Te6edf3captureTff7b72: Tff7b72true Tb4b4b4}Ta5d6ff"
Te6edf3classTff7b72=Ta5d6ff"cursor-default relative inline-block text-left"
Tb4b4b4>
T8b949e<!-- menu button -->
Tb4b4b4<Tff7b72div Te6edf3refTff7b72=Ta5d6ff"dropdown-button" Te6edf3classTff7b72=Ta5d6ff"touch-manipulation" Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3toggleMenuTa5d6ff"Tb4b4b4>
Tb4b4b4<Tff7b72slot Te6edf3nameTff7b72=Ta5d6ff"button" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72Teleport Te6edf3toTff7b72=Ta5d6ff"body"Tb4b4b4>
Tb4b4b4<Tff7b72Transition
Te6edf3enter-active-classTff7b72=Ta5d6ff"transition ease-out duration-100"
Te6edf3enter-from-classTff7b72=Ta5d6ff"transform opacity-0 scale-95"
Te6edf3enter-to-classTff7b72=Ta5d6ff"transform opacity-100 scale-100"
Te6edf3leave-active-classTff7b72=Ta5d6ff"transition ease-in duration-75"
Te6edf3leave-from-classTff7b72=Ta5d6ff"transform opacity-100 scale-100"
Te6edf3leave-to-classTff7b72=Ta5d6ff"transform opacity-0 scale-95"
Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isShowingMenu Tff7b72&& Te6edf3dropdownPositionTa5d6ff"
Te6edf3refTff7b72=Ta5d6ff"dropdownPanel"
Te6edf3classTff7b72=Ta5d6ff"overflow-x-hidden fixed z-200 w-56 rounded-md bg-white dark:bg-zinc-800 shadow-lg border border-gray-200 dark:border-zinc-700 focus:outline-hidden"
Tb4b4b4:Te6edf3styleTff7b72=Ta5d6ff"Te6edf3dropdownPanelStyleTa5d6ff"
Tb4b4b4@Te6edf3clickTb4b4b4.Te6edf3stopTff7b72=Ta5d6ff"Te6edf3hideMenuTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72slot Te6edf3nameTff7b72=Ta5d6ff"items" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72TransitionTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72TeleportTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72scriptTb4b4b4>
Tff7b72import Tb4b4b4{ Te6edf3clampFloatingToViewport Tb4b4b4} Tff7b72from Ta5d6ff"../js/clampFloatingToViewport.js"Tb4b4b4;
Tff7b72export Tff7b72default Tb4b4b4{
Te6edf3nameTff7b72: Ta5d6ff"DropDownMenu"Tb4b4b4,
Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{
Te6edf3isShowingMenuTff7b72: Tff7b72falseTb4b4b4,
Te6edf3dropdownPositionTff7b72: Tff7b72nullTb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3computedTff7b72: Tb4b4b4{
Te6edf3dropdownPanelStyleTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72!Tff7b72thisTb4b4b4.Te6edf3dropdownPositionTb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{Tb4b4b4}Tb4b4b4;
Tb4b4b4}
Tff7b72const Te6edf3style Tff7b72= Tb4b4b4{
Te6edf3leftTff7b72: Ta5d6ff`Tffd700${Tff7b72thisTb4b4b4.Te6edf3dropdownPositionTb4b4b4.Te6edf3xTffd700}Ta5d6ffpxTa5d6ff`Tb4b4b4,
Te6edf3topTff7b72: Ta5d6ff`Tffd700${Tff7b72thisTb4b4b4.Te6edf3dropdownPositionTb4b4b4.Te6edf3yTffd700}Ta5d6ffpxTa5d6ff`Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3dropdownPositionTb4b4b4.Te6edf3maxHeight Tff7b72!= Tff7b72nullTb4b4b4) Tb4b4b4{
Te6edf3styleTb4b4b4.Te6edf3maxHeight Tff7b72= Ta5d6ff`Tffd700${Tff7b72thisTb4b4b4.Te6edf3dropdownPositionTb4b4b4.Te6edf3maxHeightTffd700}Ta5d6ffpxTa5d6ff`Tb4b4b4;
Te6edf3styleTb4b4b4.Te6edf3overflowY Tff7b72= Ta5d6ff"auto"Tb4b4b4;
Tb4b4b4} Tff7b72else Tb4b4b4{
Te6edf3styleTb4b4b4.Te6edf3overflow Tff7b72= Ta5d6ff"hidden"Tb4b4b4;
Tb4b4b4}
Tff7b72return Te6edf3styleTb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3methodsTff7b72: Tb4b4b4{
Te6edf3toggleMenuTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3isShowingMenuTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3hideMenuTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4} Tff7b72else Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3showMenuTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3showMenuTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3isShowingMenu Tff7b72= Tff7b72trueTb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3adjustDropdownPositionTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3hideMenuTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3isShowingMenu Tff7b72= Tff7b72falseTb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3dropdownPosition Tff7b72= Tff7b72nullTb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3onClickOutsideMenuTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3isShowingMenuTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3hideMenuTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3adjustDropdownPositionTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3button Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4[Ta5d6ff"dropdown-button"Tb4b4b4]Tb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72!Te6edf3buttonTb4b4b4) Tff7b72returnTb4b4b4;
Tff7b72const Te6edf3buttonRect Tff7b72= Te6edf3buttonTb4b4b4.Te6edf3getBoundingClientRectTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72const Te6edf3menuWidth Tff7b72= T79c0ff224Tb4b4b4;
Tff7b72let Te6edf3x Tff7b72= Te6edf3buttonRectTb4b4b4.Te6edf3right Tff7b72- Te6edf3menuWidthTb4b4b4;
Te6edf3x Tff7b72= Tffa657MathTb4b4b4.Te6edf3minTb4b4b4(Tffa657MathTb4b4b4.Te6edf3maxTb4b4b4(T79c0ff8Tb4b4b4, Te6edf3xTb4b4b4)Tb4b4b4, Tffa657windowTb4b4b4.Te6edf3innerWidth Tff7b72- Te6edf3menuWidth Tff7b72- T79c0ff8Tb4b4b4)Tb4b4b4;
Tff7b72const Te6edf3spaceBelow Tff7b72= Tffa657windowTb4b4b4.Te6edf3innerHeight Tff7b72- Te6edf3buttonRectTb4b4b4.Te6edf3bottom Tff7b72- T79c0ff4Tb4b4b4;
Tff7b72const Te6edf3spaceAbove Tff7b72= Te6edf3buttonRectTb4b4b4.Te6edf3top Tff7b72- T79c0ff8Tb4b4b4;
Tff7b72let Te6edf3y Tff7b72= Te6edf3spaceBelow Tff7b72>= Te6edf3spaceAbove Tff7b72? Te6edf3buttonRectTb4b4b4.Te6edf3bottom Tff7b72+ T79c0ff4 Tff7b72: Tffa657MathTb4b4b4.Te6edf3maxTb4b4b4(T79c0ff8Tb4b4b4, Te6edf3buttonRectTb4b4b4.Te6edf3top Tff7b72- T79c0ff200 Tff7b72- T79c0ff4Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3dropdownPosition Tff7b72= Tb4b4b4{ Te6edf3xTb4b4b4, Te6edf3yTb4b4b4, Te6edf3maxHeightTff7b72: Tff7b72null Tb4b4b4}Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3panel Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$refsTb4b4b4.Te6edf3dropdownPanelTb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72!Te6edf3panelTb4b4b4) Tff7b72returnTb4b4b4;
Tff7b72const Te6edf3rect Tff7b72= Te6edf3panelTb4b4b4.Te6edf3getBoundingClientRectTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72const Tb4b4b4{ Te6edf3leftTb4b4b4, Te6edf3topTb4b4b4, Te6edf3maxHeight Tb4b4b4} Tff7b72= Te6edf3clampFloatingToViewportTb4b4b4(
Te6edf3rectTb4b4b4.Te6edf3leftTb4b4b4,
Te6edf3rectTb4b4b4.Te6edf3topTb4b4b4,
Te6edf3rectTb4b4b4.Te6edf3widthTb4b4b4,
Te6edf3rectTb4b4b4.Te6edf3height
Tb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3dropdownPosition Tff7b72= Tb4b4b4{ Te6edf3xTff7b72: Te6edf3leftTb4b4b4, Te6edf3yTff7b72: Te6edf3topTb4b4b4, Te6edf3maxHeight Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────